<template>

<el-dialog
        :model-value="dialogVisible"
        :width="700"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :align-center="true"
        @close="cancel"
    >
    <template #header="{ titleId, titleClass }">
            <div :id="titleId" :class="titleClass">
                {{ props.title }}
            </div>
    </template>

    <div class="data__input">
              
              <el-form  :rules="rules" :model="data_obj" ref="formRef">
                <el-form-item label="名字" class="label"  prop="name" style="width: 100%; height: 100%;">
                      <div class="upload__img" v-if="data_obj.image_url">
                        <el-image
                            style="width: 100%; height: 100%; object-fit: contain; border-radius: 6px;"
                            :src="data_obj.image_url"
                            fit="contain"
                            :zoom-rate="1.2"
                            :max-scale="7"
                            :min-scale="0.2"
                            :preview-src-list="[data_obj.image_url]"
                            :initial-index="4"
                            :hide-on-click-modal="true"
                            />
                        
                        <span @click="handleRemove" class="del__img"><svg-icon name="icon-chahao" :size="20"></svg-icon></span>
                    </div>

                    <el-upload ref="upload_ins" v-else action="#" :auto-upload="false" :on-change="handleFileChange" :show-file-list="false" :limit="1" :class="{'file__upload': disabled, 'upload__contains': true}">
                        
                        <el-icon class="upload__icon"><Plus /></el-icon>
                    </el-upload>
                  </el-form-item>

                  <el-form-item label="名字" class="label"  prop="name">
                      <el-input placeholder="请输入名字"  v-model="data_obj.name"> </el-input>
                  </el-form-item>

                  <el-form-item label="标签" class="label"   prop="label">
                      <el-input placeholder="请输入标签"  v-model="data_obj.label"> </el-input>
                  </el-form-item>

                  <el-form-item label="排序" class="label"   prop="sort">
                      <el-input placeholder="请输入排序"  v-model="data_obj.sort"> </el-input>
                  </el-form-item>

                  <el-form-item label="点数" class="label"   prop="point">
                      <el-input placeholder="请输入点数"  v-model="data_obj.point"> </el-input>
                  </el-form-item>

                  <el-form-item label="队列" class="label"   prop="queue">
                      <el-input placeholder="请输入队列"  v-model="data_obj.queue"> </el-input>
                  </el-form-item>

                  <el-form-item label="排序队列" class="label"   prop="order">
                      <el-input placeholder="请输入排序队列"  v-model="data_obj.order"> </el-input>
                  </el-form-item>

                  <el-form-item label="工作流ID" class="label"   prop="workflowId">
                      <el-input placeholder="工作流ID"  v-model="data_obj.workflowId"> </el-input>
                  </el-form-item>

                  <el-form-item label="可用" class="label"   prop="enable">
                      <el-switch
                        v-model="data_obj.enable"
                        :active-value="1"
                        :inactive-value="0"
                        />
                  </el-form-item>

                  <el-form-item label="描述" class="label"   prop="describe"  style="width: 100%;">
                      <el-input resize="none"  :rows="4" type="textarea" placeholder="请输入描述"  v-model="data_obj.describe"> </el-input>
                  </el-form-item>

                  <el-form-item label="输入" class="label"   prop="input" style="width: 100%;">
                      <el-input resize="none" :rows="6" type="textarea" placeholder="请输入输入"  v-model="data_obj.input"> </el-input>
                  </el-form-item>


              
          </el-form>
              
          </div>

          <div class="dialog__bottom">
            <div>
                <el-button plain @click="cancel">取消</el-button>
                <el-button type="primary" plain @click="confirm">提交</el-button>
            </div>
        </div>

</el-dialog>

</template>

<script setup>
import { ref, onMounted, nextTick, watch, watchEffect, reactive } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import MessageBox from '@/utils/MessageBox';

const props = defineProps(['visible', "title", "instance"])
const emit = defineEmits(['cancel', 'confirm'])
const formRef = ref(null);
const dialogVisible = ref(props.visible)
watch(() => props.visible, (value) => value && (dialogVisible.value = true))

const data_obj = ref(props.instance)
watchEffect(() => data_obj.value = props.instance)

const upload_ins = ref(null)


const disabled = ref(false)

const handleRemove = () => {

    disabled.value = false
    
    data_obj.value.image = null
    data_obj.value.image_url = null
}

const handleFileChange = (file, filelist)=>{

    // console.log(file)

    if (!['image/png', 'image/jpg', 'image/jpeg', 'image/gif'].includes(file.raw.type)) {
        MessageBox.error('请上传格式为jpg,jpeg,png,gif的图片')
        upload_ins.value.clearFiles()
        return false
    } else if (file.size / 1024 / 1024 > 10) {
        MessageBox.error('请上传小于10MB的图片')
        upload_ins.value.clearFiles()
        return false
    }
    
    data_obj.value.image_url = URL.createObjectURL(file.raw)
    disabled.value = true

    data_obj.value.image = file.raw
    data_obj.value.update_img = 1
}


const rules = {
    name:[
    { required: true, message: "请输入名字", trigger: 'blur' },
    ],
    
}

onMounted(()=>{
    
})


function confirm(){
    formRef.value.validate((valid) => {
    if (valid) {
      // 提交表单逻辑
      emit('confirm', data_obj.value)
      dialogVisible.value = false
      data_obj.value = {}
    } else {
      return false;
    }
  });
}

function cancel(){
    emit('cancel')
    dialogVisible.value = false
    data_obj.value = {}
}


onMounted(()=>{
    
})

</script>

<style lang="scss">
.data__input{
    padding: 0 20px 0px 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    
    .el-form{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .el-form-item{
            width: 50%;
            .el-form-item__label{
                width: 90px;
            }
        }
    }
    
}
.dialog__bottom{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
}



.upload__img {
        border: 1px dashed var(--el-border-color);
        border-radius: 6px;
        width: 130px;
        height: 130px;
        display: block;
        position: relative;
        user-select: none;
        .del__img{
            cursor: pointer;
            position: absolute;
            right: 5px;
            top: 5px;
        }
        .del__img:hover{
            color: var(--wchime-color-highlight);
        }
        }

    :deep(.el-upload-list__item){
        justify-content: center;
    }

    :deep(.file__upload .el-upload-list .el-upload--picture-card){
        display: none;
    }
</style>



<style>
.upload__contains .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.upload__contains .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.upload__icon {
  font-size: 28px;
  color: #8c939d;
  width: 130px;
  height: 130px;
  text-align: center;
}
</style>





